<template>
  <svg :class="iconClass">
    <use :xlink:href="'#'+ symbol"></use>
  </svg>
</template>

<script>
  export default {
    props: [
      'symbol',
      'className'
    ],
    computed: {
      iconClass() {
        const { symbol, className } = this
        return className ? `Icon Icon-${symbol} ${className}` : `Icon Icon-${symbol}`
      }
    }
  }
</script>
<style>
  .iconClass{
    display: inline-block;
    padding: 0;
    margin: 0;
  }
</style>
